.tasks {
    font-size:14px;
}

.tasks__header {
    display:flex;
    background:#f9f9f9;
}

.tasks__task {
    background:#fff;
}

.tasks__task-row {
    display:flex;
    cursor:pointer;
    border-bottom:1px solid #dddddd;
    transition:200ms cubic-bezier(0.19, 1, 0.22, 1) background-color;

    &:hover {
        background:#fafafa;
    }
}

.tasks__c {
    padding:12px 0;

    a {
        color:#229EDA;
        display:block;
        padding:11px 10px;
    }

    @at-root .tasks__header #{&} {
        padding:12px 10px;

        &:first-of-type {
            padding:12px 20px;
        }
    }
}

.tasks__c--left-pad {
    padding-left:10px;
}

.tasks__c--10 {
    width:10%;
}

.tasks__c--30 {
    width:30%;
}

.tasks__c--20 {
    width:20%;
}

.tasks__task-subtasks {

}

.tasks__indent-icon-group {
    display:flex;
    align-items:center;
}

.tasks__indent-icon {
    margin-left:10px;
    width:36px;
    padding-right:20px;
}